import { Layout, Menu } from '@arco-design/web-react';
import {
  IconApps,
} from '@arco-design/web-react/icon';
import { useCallback, useState } from 'react';
import { Route, Routes, useNavigate } from 'react-router-dom';
import { useRecoilValue } from 'recoil';
import { ConversationInfoItem, PermissionType } from '../../common/types/conversation';
import { userInfoState } from '../../store/userInfo';
import { AllConversation } from './components/AllConversation';
import { MyConversation } from './components/MyConversation';
import { PermissionConfig } from './components/PermissionConfig';
import { TicketConfig } from './components/TicketConfig';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

const { Sider } = Layout;
const { Content } = Layout;

export const MainContent = () => {
  const navigate = useNavigate();
  const userInfo = useRecoilValue(userInfoState);
  const [currentConversation, setCurrentConversation] = useState<ConversationInfoItem>();

  const handleChangeConversation = useCallback((conversation: ConversationInfoItem) => {
    setCurrentConversation(conversation);
  }, []);

  return (<div className='menu-demo'>
    <Layout style={{ height: 'calc(100vh - 60px)' }}>
      <Sider
        style={{ width: '200px' }}
        className="shadow-none h-full">
        <Menu
          style={{ height: '100%' }}
          theme='dark'
          defaultOpenKeys={['0']}
          defaultSelectedKeys={['0_0']}
        >
          <SubMenu
            key='0'
            title={
              <>
                <IconApps /> 会话
              </>
            }
          >
            <MenuItem key='0_0' onClick={() => { navigate('/conversation/all') }}>所有会话</MenuItem>
            {!(userInfo.permission === PermissionType.customer) ?
              <>
                <MenuItem key='0_1' onClick={() => { navigate('/conversation/my') }}>我的会话</MenuItem>
                {userInfo.permission === PermissionType.manager ?
                  <MenuItem key='0_2' onClick={() => { navigate('/conversation/ticket-config') }}>工单分配</MenuItem>
                  : null
                }
                {userInfo.permission === PermissionType.manager ?
                  <MenuItem key='0_3' onClick={() => { navigate('/conversation/permission-config') }}>权限配置</MenuItem>
                  : null
                }
              </>
              : null}

          </SubMenu>
        </Menu>
      </Sider>

      <Content style={{ background: '#E5E5E5' }}>
        <Routes>
          <Route path='all' element={<AllConversation
            currentConversation={currentConversation}
            handleChangeConversation={handleChangeConversation}
          />} />
          {!(userInfo.permission === PermissionType.customer) ?
            <>
              <Route path='my' element={<MyConversation
                currentConversation={currentConversation}
                handleChangeConversation={handleChangeConversation} />} />
              {userInfo.permission === PermissionType.manager ?
                <Route path='ticket-config' element={<TicketConfig
                  currentConversation={currentConversation}
                  handleChangeConversation={handleChangeConversation} />} />
                : null
              }

              {userInfo.permission === PermissionType.manager ?
                <Route path='permission-config' element={<PermissionConfig />} />
                : null
              }
            </>
            : null}

        </Routes>
      </Content>

    </Layout>

  </div>)
}